<template>
  <div class="table-page-search-wrapper">
    <div class="top" style="margin-top: 21px">访问核心数据</div>
    <a-card :bordered="false" class="aCard">
      <a-form layout="inline">
        <a-row :gutter="20">
          <a-col :xxl="5" :xl="5" :lg="5" :sm="24">
            <a-form-item>
              <a-select v-model="visitParams.brandId" placeholder="请选择" allowClear>
                <a-select-option :value="item.id.toString()" v-for="item in brandList" :key="item.id"> {{ item.brandName }} </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :xxl="5" :xl="5" :lg="5" :sm="24">
            <a-form-item>
              <a-date-picker placeholder="开始时间" v-model="visitParams.startTime" style="width: 100%" format="YYYY-MM-DD" valueFormat="YYYY-MM-DD" :allowClear="false" />
            </a-form-item>
          </a-col>
          <a-col :xxl="5" :xl="5" :lg="5" :sm="24">
            <a-form-item>
              <a-date-picker placeholder="结束时间" v-model="visitParams.endTime" style="width: 100%" format="YYYY-MM-DD" valueFormat="YYYY-MM-DD" :allowClear="false" />
            </a-form-item>
          </a-col>
          <a-button type="primary" icon="search" @click="getVisitData">搜索</a-button>
        </a-row>
      </a-form>
      <div class="topCard">
        <div class="topDIv">
          <div class="img">
            <img src="../../../../src/assets/invite/image1.png" alt="" class="img1" />
          </div>
          <div class="aCardTitle">访问人数</div>
          <div class="Number">{{ visitData.visitsPeople }}</div>
        </div>
        <div class="topDIv">
          <div class="img">
            <img src="../../../../src/assets/invite/image2.png" alt="" class="img1" />
          </div>
          <div class="aCardTitle">访问量</div>
          <div class="Number">{{ visitData.visitsNum }}</div>
        </div>
      </div>
    </a-card>
    <div class="top">
      <div>活动预约核销统计</div>
    </div>
    <a-card :bordered="false" class="aCard">
      <div style="display: flex; justify-content: space-between">
        <a-form layout="inline" style="width: 100%">
          <a-row :gutter="20">
            <a-col :xxl="8" :xl="8" :lg="8" :sm="24">
              <a-form-item>
                <a-select v-model="segmentedParams.brandId" placeholder="来源" allowClear @change="brandIdChange">
                  <a-select-option :value="item.id.toString()" v-for="item in brandList" :key="item.id"> {{ item.brandName }} </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :xxl="8" :xl="8" :lg="8" :sm="24">
              <a-form-item>
                <a-select v-model="segmentedParams.activityId" placeholder="活动名称" allowClear :disabled="segmentedParams.brandId==''?true:false">
                  <a-select-option :value="item.id.toString()" v-for="item in hdOption" :key="item.id"> {{ item.name }} </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :xxl="5" :xl="5" :lg="5" :sm="24">
              <a-form-item>
                <a-button type="primary" icon="search" @click="getSegmentedData">搜索</a-button>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
        <img src="../../../../src/assets/newmember/download.png" alt="" @click="handleExportXls('数据看板')" style="width: 32px; height: 32px; cursor: pointer" />
      </div>
      <a-table ref="table" :scroll="{ x: 1700 }" rowKey="id" size="middle" :columns="couponColumns" :dataSource="segmentedData" :pagination="ipagination" @change="handleTableChange"> </a-table>
    </a-card>
  </div>
</template>

<script>
import { visitsSummary, dataBoard, brandList, exportDataBoard,ByBrandId } from '@/api/marketingCenter/invite'
import { STable } from '@/views/box/components'
import ARow from 'ant-design-vue/es/grid/Row'
import ACol from 'ant-design-vue/es/grid/Col'
import moment from 'moment'

const couponColumns = [
  {
    title: '序号',
    dataIndex: '',
    key: 'rowIndex',
    width: 120,
    align: 'center',
    customRender: function (t, r, index) {
      console.log(index)
      return parseInt(index) + 1
    }
  },
  {
    title: '品牌',
    dataIndex: 'brandName',
    align: 'center'
  },
  {
    title: '活动名称',
    dataIndex: 'activityName',
    align: 'center'
  },
  {
    title: '时间场次',
    dataIndex: 'activityDateTime',
    align: 'center'
  },
  {
    title: '预约人数',
    dataIndex: 'peopleNum',
    align: 'center'
  },
  {
    title: '核销人数',
    dataIndex: 'writeOffNum',
    align: 'center'
  },
  {
    title: '未核销人数',
    dataIndex: 'notWriteOffNum',
    align: 'center'
  },
]

export default {
  components: {
    ACol,
    ARow,
    STable
  },
  data() {
    return {
      visitData: {},
      couponColumns,
      segmentedData: [],
      brandList: [],
      hdOption: [],
      visitParams: {
        startTime: moment(new Date()).subtract(30, 'days').format('YYYY-MM-DD'),
        endTime: moment(new Date()).subtract(0, 'days').format('YYYY-MM-DD')
      },
      segmentedParams: {
        current: 1,
        pageSize: 10,
      },
      ipagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条'
        },
        total: 0
      }
    }
  },
  computed: {},
  watch: {},
  created() {
    //下拉
    this.getBrandList()
    //活动下拉
    this.hdList()
    //统计
    this.getVisitData()
    //列表
    this.getSegmentedData()
  },
  mounted() {},
  methods: {
    //  时间事件
    aaa() {
      console.log(this.startDate)
    },
    //分页、排序、筛选变化时触发
    handleTableChange(pagination, filters, sorter) {
      //TODO 筛选
      console.log(pagination)
      if (Object.keys(sorter).length > 0) {
        this.isorter.column = sorter.field
        this.isorter.order = 'ascend' == sorter.order ? 'asc' : 'desc'
      }
      this.ipagination = pagination
      this.getSegmentedData()
    },
    //统计
    getVisitData() {
      visitsSummary(this.visitParams).then(res => {
        if (res.code === 200) {
          this.visitData = res.data
        } else {
          this.$message.error(res.msg || res.message)
        }
      })
    },
    //列表
    getSegmentedData() {
      this.segmentedParams.current = this.ipagination.current
      this.segmentedParams.size = this.ipagination.pageSize
      delete this.segmentedParams.pageSize
      dataBoard(this.segmentedParams).then(res => {
        if (res.code === 200) {
          this.segmentedData = res.data.records
          this.ipagination.total = res.data.total;
        } else {
          this.$message.error(res.msg || res.message)
        }
      })
    },
    brandIdChange(e){
      this.$set(this.segmentedParams,'activityId','')
      //活动下拉
      this.hdList()
    },
    //品牌下拉
    getBrandList() {
      brandList({
        current: 1,
        size: '99',
        state: '1'
      })
        .then(res => {
          if (res.code === 200) {
            this.brandList = res.data
          } else {
            this.$message.error(res.msg || res.message)
          }
        })
        .catch(err => {})
    },
     hdList(){
      ByBrandId({brandId:this.segmentedParams.brandId}).then(res => {
              if (res.code === 200) {
                this.hdOption = res.data
              } else {
                this.$message.error(res.msg || res.message)
              }
            })
            .catch(err => {})
     },
    //导出
    handleExportXls(fileName) {
      exportDataBoard(this.segmentedParams).then(data => {
        if (!data) {
          this.$message.warning('文件下载失败')
          return
        }
        if (typeof window.navigator.msSaveBlob !== 'undefined') {
          window.navigator.msSaveBlob(new Blob([data], { type: 'application/vnd.ms-excel' }), fileName + '.xls')
        } else {
          let url = window.URL.createObjectURL(new Blob([data], { type: 'application/vnd.ms-excel' }))
          let link = document.createElement('a')
          link.style.display = 'none'
          link.href = url
          link.setAttribute('download', fileName + '.xls')
          document.body.appendChild(link)
          link.click()
          document.body.removeChild(link) //下载完成移除元素
          window.URL.revokeObjectURL(url) //释放掉blob对象
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.top {
  color: #303133;
  font-size: 16px;
  font-weight: 600;
  margin-left: 30px;
}
.topCard {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.aCard {
  margin: 20px 30px 30px 30px !important;
}
.aRadio {
  margin-bottom: 10px;
}
.topDIv {
  flex-grow: 1;
  width: 0;
  height: 140px;
  position: relative;
  border-radius: 8px;
  margin-bottom: 10px;
  overflow: hidden;

  &:nth-child(n + 2) {
    margin-left: 25px;
  }

  .img {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
  }
  .img1 {
    width: 100%;
    height: 140px;
  }

  .aCardTitle {
    position: absolute;
    line-height: 16px;
    font-size: 16px;
    color: #fff;
    top: 30px;
    left: 48px;
  }
  .Number {
    position: absolute;
    line-height: 46px;
    font-size: 46px;
    color: #fff;
    top: 64px;
    left: 48px;
  }
}
</style>